<template>
	<view>
		<uni-nav-bar ref="navBar" fixed statusBar title="分组管理" :border="false" backgroundColor="#ffffff"
			@clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
		</uni-nav-bar>
		<scroll-view scroll-y="true" :style="{'height':h}" @scrolltolower='scrolltolower' refresher-enabled='true'
			:refresher-triggered="triggered" @refresherrestore="onRestore" @refresherrefresh="onRefresh">
			<view v-for="item in list" class="agent-box flex justify-between item-center" :key="item.id" @click="linkHomePage(item)">
				<!-- <view class="agent-info flex justify-between item-center"> -->
					<view class="nick-name flex item-center justify-between">
						{{item.groupName}}({{item.num}})
					</view>
					<view class="flex item-center">
						<view v-if="item.commissionRate" class="mr-4 right-text">
							分组佣金<text class="ml-10" style="color: #FA4543;">{{ item.commissionRate }}%</text>
						</view>
						<uni-icons type="right" size="18" color="rgba(51, 51, 51, 0.6)"></uni-icons>
					</view>

				<!-- </view> -->
				
			</view>
		</scroll-view>
		<view class="release-btn" @click="linkHomePage(null)">新建分组</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		getCurrentInstance
	} from 'vue'
	import {
		mathHeight
	} from '@/utils/index.js'
	import { pageGroup } from '@/pagesD/api/group.js'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	const h = ref(0)
	h.value = mathHeight(120)
	const triggered = ref(false)
	let list = ref([])
	let total = ref(0)
	const params = ref({
		businessId: '',
		pageNum: 1,
		pageSize: 15
	})
	let getOpenerEventChannel = ref(null)
	onLoad(() => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel();
	})
	// getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel();
	const getList = async () => {
		triggered.value = true
		uni.showLoading()
		let result = await pageGroup({
			...params.value
		})
		if (result) {
			list.value = params.value.pageNum == 1 ? result.list : (list.value).concat(result.list)
			total.value = result.total
		}
		uni.hideLoading()
		triggered.value = false
	}
	const scrolltolower = () => {
		if (list.value.length >= total.value) {
			return
		}
		params.value.pageNum = params.value.pageNum + 1
		getList()
	}
	const onRestore = () => {
		// setTimeout(() =>{
		triggered.value = false; // 需要重置
		// },2000)
		// console.log("onRestore");
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList()
	}
	const onRefresh = () => {
		triggered.value = true
		reFresh()
	}
	const linkHomePage = (agent) => {
		let query = ''
		if(agent){
			query = `?id=${agent.id}`
		}
		uni.navigateTo({
			url:`/pagesD/group-manage/add-group/add-group${query}`,
			events: {
				reFreshPage: (data) => {
					reFresh()
				}
			},
			success: (res) => {
				if(agent && agent.id){
					res.eventChannel.emit('acceptData',{data:agent})
				}
			}
		})
	}
	const goBack = () => {
		if(getCurrentPages().length === 1) {
			uni.reLaunch({
				url: '/pages/home/home'
			})
			return
		}
		getOpenerEventChannel.value.emit('reFreshPage','refresh')
		uni.navigateBack()
	}
	onShow(() => {
		getList()
	})
</script>

<style lang="scss" scoped>
	.search-box{
		margin: 20px;
		// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
		border-radius: 8px;
		padding: 0px 10px;
		height: 36px;
		.icon-search{
			height: 20px;
		}
		.search-inp{
			width: calc(100% - 40px);
			margin-left: 10px;
			font-size: 12px;
		}
	}
	.sel-asc {
		margin: 0 20px;
		padding: 10px 0;
		color: #999999;
		font-size: 14px;
		min-height: 40px;
		.asc-item {
			margin-right: 20px;
			&:last-child{
				margin-right: 0px;
			}
			.asc-text {
				margin-right: 4px;
	
				&.active {
					color: #FA4543;
				}
			}
	
		}
	
	}
	
	.icon-up {
		width: 8px;
		height: 8px;
	}
	
	.icon-down {
		width: 8px;
		height: 8px;
		transform: rotate(180deg)
	}
	.agent-box{
		padding: 8px 12px;
		// margin: 0 20px 20px;
		background-color: #ffffff;
		// border-radius: 8px;
		margin-top: 2px;
		height: 46px;
		.agent-info{
			width: calc(100% - 60px);
			margin-left: 10px;
		}
		.nick-name{
			font-size: 16px;
			font-weight: 400;
			line-height: 20px;
		}
		.right-text{
			color: rgba(51,51,51,0.6);
			font-size: 16px;
		}
		.total-settle{
			font-size: 12px;
			font-weight: 400;
			// line-height: 17px;
			color: rgba(51, 51, 51, 0.6);
		}
		.red-price{
			color: rgba(250, 69, 67, 1);
		}
	}
	.release-btn {
		// width: 343px;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		// gap: 10px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;
	}
	
</style>